import React from 'react';
import {Form, Row, Col, Modal} from 'antd';
import {FORM_OPTIONS} from '../../constants';
import WrappedInputNumber from '../../common/WrappedInputNumber';
import WrappedSelect from '../../common/WrappedSelect';
import {warrantyPolicyType} from '../../Enum';
import {formatMessage, language} from '../intl';
import WrappedDatePicker from '../../common/WrappedDatePicker';
const FormItem = Form.Item;

export default class AddDetail extends React.PureComponent {
    handleFilterChange = (value, name) => {
        this.props.onChange(value, `${this.props.name}.${name}`);
    };

    handleTypeChange = (value, name) => {
        const {vehicles = []} = this.props.data;
        if(vehicles.length)
            Modal.confirm({
                title: formatMessage({
                    id: 'addDetail.selectType.title',
                    defaultMessage: '切换索赔类型，将会清空该条款下的车型车辆清单，是否继续？'
                }),
                onOk: () => {
                    this.handleFilterChange(value, name);
                    this.props.onRemoveAll(`${this.props.name}.vehicles`);
                }
            });
        else
            this.handleFilterChange(value, name);
    };
    render() {
        if(!this.props.data.warrantyPolicyType)
            return (<Row>
                <Col {...FORM_OPTIONS.col}>
                    <FormItem
                        label={formatMessage({
                            id: 'addDetail.form.warrantyPolicyType',
                            defaultMessage: '索赔类型'
                        })}
                        {...FORM_OPTIONS.item}
                        validateStatus={this.props.isValidate &&
                            !this.props.data.warrantyPolicyType ? 'error' : null}
                        required>
                        <WrappedSelect
                            name="warrantyPolicyType"
                            value={this.props.data.warrantyPolicyType}
                            options={warrantyPolicyType.toList(language)}
                            onChange={this.handleFilterChange} />
                    </FormItem>
                </Col>
            </Row>);
        return (
            <React.Fragment>
                <Row>
                    <Col {...FORM_OPTIONS.col}>
                        <FormItem
                            label={formatMessage({
                                id: 'addDetail.form.warrantyPolicyType',
                                defaultMessage: '索赔类型'
                            })}
                            {...FORM_OPTIONS.item}
                            validateStatus={this.props.isValidate &&
                                !this.props.data.warrantyPolicyType ? 'error' : null}
                            required>
                            <WrappedSelect
                                name="warrantyPolicyType"
                                value={this.props.data.warrantyPolicyType}
                                options={warrantyPolicyType.toList(language)}
                                onChange={this.handleTypeChange} />
                        </FormItem>
                    </Col>
                    <Col {...FORM_OPTIONS.col}>
                        <FormItem label={formatMessage({id: 'addDetail.form.warrantyMileage',
                            defaultMessage: '索赔里程'})} {...FORM_OPTIONS.item}
                        validateStatus={this.props.isValidate && !this.props.data.warrantyMileage ? 'error' : null}
                        required>
                            <WrappedInputNumber
                                name="warrantyMileage"
                                min={0}
                                value={this.props.data.warrantyMileage}
                                onBlur={this.handleFilterChange} />
                        </FormItem>
                    </Col>
                    <Col {...FORM_OPTIONS.col}>
                        <FormItem label={formatMessage({id: 'addDetail.form.warrantyMonth',
                            defaultMessage: '索赔月份'})} {...FORM_OPTIONS.item}
                        validateStatus={this.props.isValidate && !this.props.data.warrantyMonth ? 'error' : null}>
                            <WrappedInputNumber
                                name="warrantyMonth"
                                min={0}
                                value={this.props.data.warrantyMonth}
                                onBlur={this.handleFilterChange} />
                        </FormItem>
                    </Col>
                    <Col {...FORM_OPTIONS.col}>
                        <FormItem label={formatMessage({id: 'addDetail.form.saleStartDate',
                            defaultMessage: '发车开始时间'})} {...FORM_OPTIONS.item} >
                            <WrappedDatePicker
                                name="saleStartDate"
                                value={this.props.data.saleStartDate}
                                onChange={this.handleFilterChange} />
                        </FormItem>
                    </Col>
                    <Col {...FORM_OPTIONS.col}>
                        <FormItem label={formatMessage({id: 'addDetail.form.saleEndDate',
                            defaultMessage: '发车结束时间'})} {...FORM_OPTIONS.item} >
                            <WrappedDatePicker
                                name="saleEndDate"
                                value={this.props.data.saleEndDate}
                                onChange={this.handleFilterChange} />
                        </FormItem>
                    </Col>
                </Row>
            </React.Fragment>
        );
    }
}
